<!--
 * @Author: your name
 * @Date: 2020-07-13 14:54:50
 * @LastEditTime: 2020-07-15 15:57:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sanitation-web\src\views\modules\sys\role\role-user-add-or-update.vue
-->
<template>
  <el-dialog :visible.sync="visible"
             title="分配用户"
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="add-or-updata"
             width="46%"
             :close-on-press-escape="false">
    <div v-loading="dataListLoading">
      <el-transfer v-model="value"
                   :props='defalutProps'
                   :titles="['未分配用户', '已分配用户']"
                   :data="userList"></el-transfer>
    </div>
    <template slot="footer">
      <el-button type="primary"
                 :loading="dataListLoading"
                 @click="dataFormSubmitHandle()"
                 :disabled="enableConfig">{{ $t('confirm') }}</el-button>
      <el-button @click="closeDialog">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      userList: [],
      value: [],
      visible: false,
      menuList: [],
      enableConfig: false, // 确认之后禁用掉按钮，等操作成功之后恢复
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/system/sysRole/roleAddUserList', // 已分配和未分配的用户
        addOrUpdateURL: '/system/sysRole/updateRoleUser?roleId=' // 新增或添加的接口
      },
      defalutProps: {
        key: 'id',
        label: 'realName'
      },
      dataForm: {
        id: '',
        name: '',
        menuIdList: [],
        remark: ''
      }
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    closeDialog () {
      this.visible = false
      this.dataListLoading = false
      // this.$refs['dataForm'].resetFields()
    },
    init (data) {
      this.visible = true
      this.dataListLoading = false
      data = data || {}
      // console.log(data.id)
      this.dataForm.id = data.id
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.getDataList(`${this.mixinViewModuleOptions.getDataListURL}`, true, { roleId: this.dataForm.id }).then(res => {
        if (res.code !== 0) { return false }
        this.userList = []
        this.value = []
        this.userList.push(...res.data)
        res.data.map(item => {
          if (item.sign) {
            this.value.push(item.id)
          }
        })
        // console.log('getInfo', this.dataForm.id)
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.dataListLoading = true
      this.$http.put(`${this.mixinViewModuleOptions.addOrUpdateURL}${this.dataForm.id}`, this.value)
        .then(({ data: res }) => {
          this.dataListLoading = false
          if (res.code !== 0) {
            this.dataList = []
            if (res.code === 500) {
              this.$message.error('请求异常,请稍后再试')
              console.log(res.msg)
            } else {
              this.$message.error(res.msg)
            }
            return this.errorPromise
          }

          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500
          })
          this.closeDialog()
          this.$emit('callBack')
        }).catch(() => {
          this.dataListLoading = false
        })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
